<template>
	<view class="good-list" >
		<goods-list :hotGoodsList="hotGoodsList" @goGoodsDetail="goGoodsDetail"></goods-list>
		<view class="bottom" v-if="flag">------触底了------</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goodsList/index.vue'
	export default {
		data() {
			return {
				hotGoodsList:[],
				defaultPage:1,
				flag:false
			}
		},
		components:{
			goodsList
		},
		onLoad(){
			this.getGoodsList()
		},
		onPullDownRefresh() {
			this.defaultPage=1
			this.hotGoodsList=[]
			setTimeout(()=>{
				this.getGoodsList(uni.stopPullDownRefresh)
			},2000)
		},
		onReachBottom(){
			if(this.hotGoodsList.length<15){
				this.defaultPage++
				this.getGoodsList()
				console.log(this.hotGoodsList.length)
			}else{
				this.flag=true
				return 
			}
		
		},
		methods: {
			getGoodsList(callBack){
				this.$myRequest({
					url:`/api/getgoods?pageindex=${this.defaultPage}`
				}).then(res=>{
					this.hotGoodsList=[...this.hotGoodsList,...res.data.message]
				})
				// callBack&&callBack()
				callBack?callBack():callBack
			},
			goGoodsDetail(id){
				uni.navigateTo({
					url:`../goods-detail/goods-detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
.good-list{
	overflow: hidden;
	background-color: #eee;
}
.bottom{
	text-align:center;
	width:100%;
	height:50rpx;
	line-height:50rpx;
	font-size:28rpx;
	color:#2C405A;
	
}
</style>
